<template>
	<view class="class">
		<u-navbar ref="navbar" :border-bottom="false" title="课后作业"></u-navbar>
		<view class="part02 container acea-row row-column" >
			<view class="headerZw"></view>
			<view class="header acea-row row-middle row-between" :style="'top: '+navbarHeight+'px;overflow:'+(listZIndex?'hidden':'')">
				<u-search class="search" v-model="taskname" @search="init" @clear="init" :clearabled="true" placeholder="搜索作业标题" :show-action="false"></u-search>
				<view class="filter acea-row row-middle">
					<text>筛选</text>
					<image src="../../../static/images/student-filter.png" mode=""></image>
				</view>
				<u-dropdown :style="'z-index: '+quekeList.dropdownZIndex+';'" ref="uDropdown" class="dropdown" @open="dropdownOpen" @close="dropdownClose">
					<u-dropdown-item>
						<view class="dropdown-content">
							<scroll-view scroll-y class="content">
								<view class="item acea-row row-column">
									<view class="title">班级</view>
									<view class="checkbox acea-row">
										<view class="checkbox-item" :class="item.isCheck?'checkbox-item-active':''" v-for="(item,index) in checkboxList" :key="index" @click="checkboxHandle1(item.banji_id,1)">
											{{item.name}}
										</view>
									</view>
								</view>
							</scroll-view>
							<view class="footer acea-row row-middle">
								<view class="btn btn1" @click="reset">清空</view>
								<view class="btn btn2" @click="confirm">完成</view>
							</view>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view :style="'min-height:100vh;z-index: '+listZIndex+';'" v-if="hwData.length != 0"> 
				<view class="list acea-row row-column" style="padding-bottom: 32rpx;" >
					<!-- <view class="title-time">2021年4月</view> -->
					<view class="item acea-row row-column" v-for="(item,index) in hwData" :key="index" @click="common.go('/pages/pack/class/homeworkList?id='+item.id)">
						<view class="name workname">{{item.title}}</view>
						<view class="title">{{item.name}}</view>
						<view class="p acea-row row-middle">
							<text>已阅读:</text>
							<text>{{item.ydnum}}/{{item.allnum}}</text>
						</view>
						<view class="p acea-row row-middle">
							<text>已提交:</text>
							<text>{{item.tjnum}}/{{item.allnum}}</text>
						</view>
						<view class="p acea-row row-middle">
							<text>已批阅:</text>
							<text>{{item.pynum}}/{{item.allnum}}</text>
						</view>
						<view class="edit" @click.stop="common.go('/pages/pack/index/editHomework?id='+item.id)">修改</view>
						<view class="share" @click.stop="share(item.id)">分享</view>
					</view>
					<u-loadmore :status="status" style="margin-top: 32rpx;display: block;" />
				</view>
			</view>
			<u-empty text="暂无作业" mode="list" v-else margin-top="32"></u-empty>
		</view>
		<view :style="'height: calc(120rpx + '+iosSafeBottom+'px + '+SafeBottom+'rpx);'"></view>
		<view class="footer2" ref="footer" :style="'padding-bottom: calc('+iosSafeBottom+'px + '+SafeBottom+'rpx);box-sizing: content-box;'">
			<view class="btn" @click.stop="common.go('/pages/pack/index/setHomework')">布置作业</view>
		</view>
	</view>
</template>

<script>
	import common from '../../../api/common.js'
	import request from '../../../api/request.js'
	const app = getApp()
	export default {
		data(){
			return{
				common,
				navbarHeight:app.globalData.navbarHeight,
				iosSafeBottom:app.globalData.iosSafeBottom,
				SafeBottom:app.globalData.iosSafeBottom==0?'24':'-24',
				status:'loadmore',
				page: 1,
				limit:10,
				hwData:[], //作业列表参数
				taskname:'', //搜索参数
				partLessHeight:0,
				canTabChange:true,
				tabList:[{
					name: '点名记录'
				}, {
					name: '缺课补课'
				},{
					name: '请假申请'
				}],
				checkboxList:[],
				quekeList:{
					checkboxList:[{id:1,title:'英语一班',isCheck:false},
								{id:2,title:'英语二班',isCheck:false},
								{id:3,title:'英语三班',isCheck:false},
								{id:4,title:'英语四班',isCheck:false},
								{id:5,title:'英语五班',isCheck:false},
								{id:6,title:'英语六班',isCheck:false},
								{id:7,title:'英语七班',isCheck:false}],
					reason:[{id:1,title:'全部',isCheck:false},
							{id:2,title:'请假',isCheck:false},
							{id:3,title:'未到',isCheck:false}],
					buke:[{id:1,title:'全部',isCheck:false},
							{id:2,title:'已补课',isCheck:false},
							{id:3,title:'未补课',isCheck:false}],
					classTimeMin:"",
					classTimeMax:"",
					dropdownZIndex:-1,
				},
				timePickerParams:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				listZIndex:100
			}
		},
		onShow() {
			this.init()
		},
		mounted() {
			setTimeout(()=>{
				this.quekeList.dropdownZIndex = 5
			},800)
			this.setPartLessHeight()
		},
		methods:{
			init(){
				this.page = 1
				this.hwData = []
				if(this.checkboxList.length == 0){
					this.getClass()
				}else{
					this.getHomeworkData()
				}
			},
			getHomeworkData(){
				let data = {
					order:"desc",
					page:this.page,
					limit:this.limit,
				}
				let f = this.checkboxList.filter(e=>e.isCheck)
				if(f.length != 0){
					data.banji_id = ''
					for(let i of f){
						data.banji_id += ',' + i.banji_id
					}
					data.banji_id = data.banji_id.substring(1,data.banji_id.length)
				}
				if(this.taskname != ""){
					data.taskname = this.taskname
				}
				this.status = 'loading'
				request.go((e)=>{
					this.status = 'loadmore';
					uni.stopPullDownRefresh()
					if(e.data.length == 0){
						this.status = 'nomore'
					}else{
						this.hwData = this.hwData.concat(e.data)
					}
				},'/Jwteachertask/tasklist',data,'POST')
			},
			getClass(){
				let data = {
					limit:9999
				}
				request.go((e)=>{
					let arr = []
					for(let i of e.data){
						// 去重
						let f = arr.find(o=>o.banji_id == i.banji_id)
						if(!f){
							i.isCheck = false
							arr.push(i)
						}
					}
					this.checkboxList = arr
					this.getHomeworkData()
				},'/Jwteachertask/taskselect',data,'POST')
			},
			setPartLessHeight(){
				const that = this
				uni.getSystemInfo({
					success(res) {
						let navbarHeight = parseInt(that.$refs.navbar.navbarHeight + that.$refs.navbar.statusBarHeight)
						let partLessHeight = parseInt(navbarHeight*2)
						// console.log(navbarHeight,partLessHeight)
						that.partLessHeight = partLessHeight
					}
				})
			},
			share(id){
				uni.showLoading({
					title:'处理中'
				})
				const self = this;
				request.go((e)=>{
					uni.hideLoading();
					uni.previewImage({
						current:0,
						urls:[e.data.base64],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
							},
						}
					})
				},"/XcxApi/getShareDoHomeWork",{taskid:id},"POST")
			},
			confirm(){
				this.init()
				this.$refs.uDropdown.close()
			},
			reset(){
				let checkboxList = this.checkboxList
				let reason = this.quekeList.reason
				let buke = this.quekeList.buke
				for(let i of checkboxList){
					i.isCheck = false
				}
				for(let i of reason){
					i.isCheck = false
				}
				for(let i of buke){
					i.isCheck = false
				}
				this.quekeList.classTimeMin=""
				this.quekeList.classTimeMax=""
			},
			checkboxHandle1(id,type){
				let checkboxList = this.checkboxList
				let reason = this.quekeList.reason
				let buke = this.quekeList.buke
				switch(type){
					case 1:
						for(let i of checkboxList){
							i.isCheck = false
						}
						checkboxList.find(e=>e.banji_id == id).isCheck = true
					break;
					case 2:
						for(let i of reason){
							i.isCheck = false
						}
						reason.find(e=>e.id == id).isCheck = !reason.find(e=>e.id == id).isCheck
					break;
					case 3:
						for(let i of buke){
							i.isCheck = false
						}
						buke.find(e=>e.id == id).isCheck = !buke.find(e=>e.id == id).isCheck
					break;
				}
			},
			dropdownOpen(){
				this.listZIndex = ""
			},
			dropdownClose(){
				setTimeout(()=>{
					this.listZIndex = 100
				},400)
			},
			setQinjia(type){
				switch(type){
					case 1:
						return {color:"#1661FF",title:"已通过"}
					break;
					case 2:
						return {color:"#FF9000",title:"已通过"}
					break;
					case 3:
						return {color:"#FF4D4F",title:"未通过"}
					break;
				}
			}
		},
		onPullDownRefresh(){
			this.init()
		},
		onReachBottom() {
			// if(this.page >= 3) return ;
			if(this.status == "loadmore"){
				this.page = ++ this.page;
				this.getHomeworkData()
			}
		},
		onHide() {
		}
	}
</script>

<style scoped>
	.class{
		min-height: 100vh;
		background-color: #f7f8fa;
	}
	.class .part01{
		overflow: hidden;
	}
	.class .container .list{
		width: 686rpx;
		margin: 32rpx auto 0;
		padding: 0 32rpx;
		background-color: #f7f8fa;
		box-sizing: content-box;
		overflow: hidden;
	}
	.class .container .list .title-time{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}
	.class .container .list .item:first-of-type{
		margin-top: 0;
	}
	.class .container .list .item{
		position: relative;
		padding: 32rpx 0 32rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		width: 100%;
		box-sizing: border-box;
		margin: 32rpx auto 0;
	}
	.class .container .list .item .edit{
		position: absolute;
		right: 32rpx;
		/* top: 50%; */
		top: 140rpx;
		/* transform: translateY(-50%); */
		background-color: #1661FF;
		border-radius: 8rpx;
		/* width: 96rpx; */
		padding: 0 20rpx;
		height: 48rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
	}
	.class .container .list .item .share{
		position: absolute;
		right: 32rpx;
		/* top: 50%; */
		top: 215rpx;
		/* transform: translateY(-50%); */
		/* background-color: #f90; */
		border-radius: 8rpx;
		/* width: 96rpx; */
		padding: 0 20rpx;
		height: 48rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
		border: 1px solid #c0c4cc;
		color: #1F2329;
	}
	.class .container .list .item .title{
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1f2329;
		line-height: 44rpx;
		margin-bottom: 32rpx;
	}
	.class .container .list .item .p{
		margin-bottom: 16rpx;
		font-size: 28rpx;
	}
	.class .container .list .item .p:last-of-type{
		margin-bottom: 0;
	}
	.class .container .list .item .p text:nth-child(1){
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 40rpx;
		width: 134rpx;
		display: block;
		margin-right: 24rpx;
	}
	.class .container .list .item .p text:nth-child(2){
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	.class .container .list .item .rollcall{
		position: absolute;
		right: 32rpx;
		top: 122rpx;
		background-color: #1661FF;
		border-radius: 8rpx;
		width: 96rpx;
		height: 48rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
	}
	.class .container .list .item .already-rollcall{
		position: absolute;
		top: 36rpx;
		right: 36rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 32rpx;
	}
	.class .part02{
		flex-wrap: nowrap !important;
	}
	.class .part02 .headerZw{
		height: 96rpx;
	}
	.class .part02 .header{
		padding: 16rpx;
		background-color: #FFFFFF;
		position: relative;
		height: 64rpx;
		border-top: 2rpx solid #ebedf0;
		box-sizing: content-box;
		position: fixed;
		width: calc(100% - 32rpx);
		left: 0;
		z-index: 105;
	}
	.class .part02 .search{
		width: 592rpx;
		z-index: 10;
	}
	.class .part02 .dropdown{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 16rpx;
	}
	.class .part02 .dropdown .dropdown-content{
		background-color: #FFFFFF;
	}
	.class .part02 .dropdown .dropdown-content .content{
		padding: 32rpx;
		box-sizing: border-box;
		max-height: 600rpx;
		/* overflow-y: auto; */
		overflow: hidden;
		margin-bottom: 32rpx;
	}
	.class .part02 .dropdown .dropdown-content .content .item{
		margin-bottom: 32rpx;
	}
	.class .part02 .dropdown .dropdown-content .content .item .title{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}
	.class .part02 .dropdown .dropdown-content .content .item .checkbox .checkbox-item{
		width: 218rpx;
		height: 64rpx;
		background: #f7f8fa;
		border-radius: 8rpx;
		margin-right: 16rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		margin-bottom: 16rpx;
	}
	.class .part02 .dropdown .dropdown-content .content .item .checkbox .checkbox-item.checkbox-item-active{
		color: #1661ff;
		background: #e6f2ff;
	}
	.class .part02 .dropdown .dropdown-content .content .item .checkbox .checkbox-item:nth-child(3n){
		margin-right: 0rpx;
	}
	.class .part02 .dropdown .dropdown-content .content .item .inputView{
		
	}
	.class .part02 .dropdown .dropdown-content .footer{
		border-top: 2rpx solid #ebedf0;
	}
	.class .part02 .dropdown .dropdown-content .footer .btn{
		width: 50%;
		height: 96rpx;
		background-color: #FFFFFF;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: CENTER;
		line-height: 96rpx;
	}
	.class .part02 .dropdown .dropdown-content .footer .btn.btn1{
		color: #1f2329;
		background-color: #FFFFFF;
	}
	.class .part02 .dropdown .dropdown-content .footer .btn.btn2{
		color: #ffffff;
		background-color: #1661FF;
	}
	.class .part02 .filter text{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
		margin-right: 10rpx;
	}
	.class .part02 .filter image{
		width: 32rpx;
		height: 32rpx;
	}
	.class .part02 .list .item .name{
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 52rpx;
		margin-bottom: 16rpx;
	}
	.class .part02 .list .item .title{
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 44rpx;
		margin-bottom: 16rpx;
	}
	.class .part02 .list .item .p text:nth-child(1){
		width: 148rpx;
		margin-right: 24rpx;
	}
	.class .part02 .list .item .status{
		position: absolute;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ff4d4f;
		line-height: 32rpx;
		top: 42rpx;
		right: 32rpx;
	}
	.class .footer2{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		z-index: 999;
		border-top: 2rpx solid #ebedf0;
	}
	.class .footer2 .btn{
		width: 622rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 24rpx auto 0;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		z-index: 99;
		background-color: #1661FF;
	}
</style>
